<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            background-color: #efefef;
            padding: 0;
            margin: 0;
        }

        div {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .content {
            background-color: #fff;
            border-radius: 15px;
            margin: 1px 5px 10px 5px;
        }

        .top {
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 1px 0px 20px 0px;
            position: relative;
        }

        .title {
            font-size: 20px;
            font-weight: bold;
        }

        .top-r {
            display: flex;
            flex-direction: column;
            align-items: center;
            font-size: 12px;
            position: absolute;
            right: 20px;
        }

        .img {
            width: 24px;
            height: 21px;
        }

        .con {
            display: flex;
            align-items: center;
            border-bottom: 1px solid #ebebeb;
            padding: 10px 10px;
        }

        .qr-code {
            width: 120px;
            height: 120px;
        }

        .con-r {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            margin-left: 5px;
        }

        .con-r-txt {
            margin-bottom: 5px;

        }

        .bottom {
            display: flex;
            justify-content: space-between;
            padding: 20px;
            height: 100px;
        }


    </style>
    <script></script>
</head>

<script type="text/javascript">

let detail = {
    hospitalName:'',
    num:'',
    departName:'',
    type:'',
    weight:'',
    handover:'',
    time:'',
    qrCode:''
}

function scanprint(){
    var datalistdiv = document.getElementById("home");
    window.connect.print(datalistdiv.offsetLeft, datalistdiv.offsetTop, datalistdiv.offsetWidth, datalistdiv.offsetHeight);
}
function feed(){
	window.connect.doFeed();
}

function getCollectDetail(detail){
    document.getElementById("hospitalName").innerText = detail.hospitalName
    document.getElementById("num").innerText = detail.num
    document.getElementById("departName").innerText = detail.departName
    document.getElementById("type").innerText = detail.type
    document.getElementById("weight").innerText = detail.weight
    document.getElementById("handover").innerText = detail.handover
    document.getElementById("time").innerText = detail.time
        var qrcode = new QRCode("qrcode", {
        text: detail.qrCode,
        width: 120,
        height: 120,
        colorDark: "#000000",
        colorLight: "#ffffff",
        correctLevel: QRCode.CorrectLevel.L
    });
    console.log('qrcode',qrcode)
}



</script>
<body>
<div class="content" id="home">
    <div class="top">
        <div class="title" id="hospitalName">抚州第一人民医院</div>
        <div class="top-r">
            <img src="./medical_waste.png" alt="" class="img"/>
            <span>医疗废物</span>
        </div>
    </div>
    <div class="con">
        <div class="qr-code" id="qrcode"></div>
        <div class="con-r">
            <div class="con-r-txt">
                <span>编号：</span>
                <span id="num">YF11ec1b71b57345</span>
            </div>
            <div class="con-r-txt">
                <span>来源：</span>
                <span id="departName">门诊普通输液室</span>
            </div>
            <div class="con-r-txt">
                <span>类型：</span>
                <span id="type">药物性</span>
            </div>
            <div class="con-r-txt">
                <span>重量：</span>
                <span id="weight">0</span>
                <span>kg</span>
            </div>
        </div>
    </div>
    <div class="bottom">
        <span>移交人:</span>
        <span id="handover">范波</span>
        <span>时间:</span>
        <span id="time">2021-09-22</span>
    </div>
</div>
<script src="./js/qrcode.js"></script>

<script>


</script>

<div class="table">
    <input type=button style="margin-left:50px" value="打印" onclick="scanprint()"/>
    <input type=button style="margin-left:50px" value="走纸" onclick="feed()"/>
</div>
</body>

</html>